layout-con 自适应双容器
更新时间:2023-06-20
一、单双容器切换组件
layout-con 单双容器切换组件,根据当前页面的宽度自动适应是单容器布局还是双容器布局。
二、属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
class-name | String | 无 | 否 | 容器类名 |
left-class-name | String | 无 | 否 | 左容器类名 |
right-class-name | String | 无 | 否 | 右容器类名 |
layout-single-class-name | String | 无 | 否 | 当为单容器时类名 |
minWidth | Number | 1720 | 否 | 单双容器的切换的临界点 |
layoutRightVoice | String | 无 | 否 | 右侧容器语音类型 |
layoutLeftVoice | String | scroll-vertical | 否 | 左侧容器语音类型 |
bindlayoutRightLower | EventHandle | 无 | 否 | 右侧容易加载更多回调(同时应用于单容器) |
bindscroll | EventHandle | 无 | 否 | 容器滚动事件,name区分滚动容器 |
三、slot
名称 | 说明 |
---|---|
left | 左侧内容 |
right | 右侧内容 |
四、示例
swan:
<layout-con layout-single-class-name="layout-single">
<view slot="left" class="left-con">
<text>左侧内容</text>
</view>
<view slot="right" class="right-con">
<text>右侧内容</text>
</view>
</layout-con>
css:
.left-con {
height: 100%;
}
.right-con {
height: 100%;
}
.layout-single .left-con, .layout-single .right-con{
height: auto;
overflow: hidden;
}
josn:
{
"navigationBarTitleText": "单双容器组件",
"usingComponents": {
"layout-con": "iov-ui/lib/layout-con"
}
}